<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绑定样式</title>
  <script src="../../js/vue.js"></script>
  <style>
    .basic{
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
    .happy{
      border: 4px solid red;;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg,yellow,pink,orange,yellow);
    }
    .sad{
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }
    .normal{
      background-color: skyblue;
    }
  </style>


</head>
<body>
<div id="root">
  <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
  <div class="basic" v-bind:class="mood" @click="changeMood">{{name}}</div> <br/><br/>
</div>

<script>
  Vue.config.productionTip = false

  const vm = new Vue({
    el:'#root',

    data:{
      name:'曾宇杰',
      mood:'normal',
    },
    // 通过方法改变mood的值达到修改样式的目的
    methods: {
      changeMood(){
        const arr = ['happy','sad','normal']
        const index = Math.floor(Math.random()*3)
        this.mood = arr[index]
      }
    },
  })
</script>


</body>
</html>